<template>
  <div class="help-center">
    <!-- 帮助中心头部 -->
    <div class="help-header">
      <h1>洗护商家帮助中心</h1>
      <p>为您提供详细的操作指南和常见问题解答</p>
    </div>

    <!-- 快速导航 -->
    <el-row :gutter="20" class="quick-nav">
      <el-col :span="6">
        <el-card shadow="hover" class="nav-card" @click="scrollToSection('getting-started')">
          <div class="nav-content">
            <el-icon class="nav-icon"><Guide /></el-icon>
            <h3>新手指南</h3>
            <p>快速了解平台功能</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="nav-card" @click="scrollToSection('order-process')">
          <div class="nav-content">
            <el-icon class="nav-icon"><List /></el-icon>
            <h3>订单流程</h3>
            <p>详细的订单处理步骤</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="nav-card" @click="scrollToSection('finance-guide')">
          <div class="nav-content">
            <el-icon class="nav-icon"><Wallet /></el-icon>
            <h3>财务管理</h3>
            <p>资金结算和提现说明</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="nav-card" @click="scrollToSection('faq')">
          <div class="nav-content">
            <el-icon class="nav-icon"><QuestionFilled /></el-icon>
            <h3>常见问题</h3>
            <p>FAQ和解决方案</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新手指南 -->
    <el-card shadow="hover" class="help-section" id="getting-started">
      <template #header>
        <h2><el-icon><Guide /></el-icon> 新手指南</h2>
      </template>
      
      <div class="guide-content">
        <h3>1. 商家注册</h3>
        <ul>
          <li>填写基本信息：商家名称、联系人、手机号等</li>
          <li>手机验证码验证：确保联系方式真实有效</li>
          <li>身份认证：上传身份证正反面照片</li>
          <li>资质上传：营业执照、选择洗护服务类型</li>
          <li>地区设置：选择服务区域和营业时间</li>
          <li>等待审核：1-3个工作日完成人工审核</li>
        </ul>

        <h3>2. 洗护服务类型</h3>
        <div class="service-types">
          <div class="service-item">
            <el-tag type="primary">洗衣服</el-tag>
            <span>普通衣物清洗、精洗、干洗等</span>
          </div>
          <div class="service-item">
            <el-tag type="success">洗鞋</el-tag>
            <span>运动鞋、皮鞋、靴子清洗护理</span>
          </div>
          <div class="service-item">
            <el-tag type="warning">洗萌宠</el-tag>
            <span>宠物洗澡、美容、护理服务</span>
          </div>
          <div class="service-item">
            <el-tag type="info">洗包包</el-tag>
            <span>皮包、布包、背包清洗保养</span>
          </div>
          <div class="service-item">
            <el-tag type="primary">洗被子</el-tag>
            <span>被子、床单、枕头等床品清洗</span>
          </div>
          <div class="service-item">
            <el-tag type="success">洗车</el-tag>
            <span>汽车内外清洗、打蜡、美容</span>
          </div>
          <div class="service-item">
            <el-tag type="warning">上门清洗</el-tag>
            <span>家庭深度清洁、家具清洗</span>
          </div>
          <div class="service-item">
            <el-tag type="danger">疏通厕所</el-tag>
            <span>管道疏通、厕所维修清洁</span>
          </div>
        </div>

        <h3>3. 智能接单设置</h3>
        <ul>
          <li>设置最大接单距离（1-20公里）</li>
          <li>设置最小订单金额</li>
          <li>选择工作时间段</li>
          <li>选择可接受的服务类型</li>
          <li>开启自动接单功能</li>
        </ul>
      </div>
    </el-card>

    <!-- 订单流程 -->
    <el-card shadow="hover" class="help-section" id="order-process">
      <template #header>
        <h2><el-icon><List /></el-icon> 订单处理流程</h2>
      </template>
      
      <div class="process-content">
        <el-steps direction="vertical" :active="7">
          <el-step title="客户下单" description="客户在平台下单，选择洗护服务类型" />
          <el-step title="商家接单" description="查看订单详情，确认接单或拒绝" />
          <el-step title="安排取件" description="联系客户，安排取件时间和人员" />
          <el-step title="上门取件" description="取件员上门，拍照记录衣物状态" />
          <el-step title="清洗处理" description="根据衣物类型进行专业清洗" />
          <el-step title="质量检查" description="检查清洗效果，确保质量合格" />
          <el-step title="配送完成" description="将清洗好的衣物配送给客户" />
          <el-step title="订单完成" description="客户确认收货，订单完成结算" />
        </el-steps>

        <div class="process-tips">
          <h3>重要提醒：</h3>
          <ul>
            <li>取件时务必拍照记录衣物状态，避免纠纷</li>
            <li>特殊污渍或贵重衣物需要特别标注</li>
            <li>及时更新订单状态，保持与客户沟通</li>
            <li>质检环节要仔细，确保清洗效果</li>
            <li>配送时注意包装，避免二次污染</li>
          </ul>
        </div>
      </div>
    </el-card>

    <!-- 财务管理 -->
    <el-card shadow="hover" class="help-section" id="finance-guide">
      <template #header>
        <h2><el-icon><Wallet /></el-icon> 财务管理指南</h2>
      </template>
      
      <div class="finance-content">
        <h3>资金类型说明</h3>
        <div class="finance-types">
          <div class="finance-item">
            <el-tag type="success">可提现余额</el-tag>
            <p>已完成订单的资金，可以申请提现</p>
          </div>
          <div class="finance-item">
            <el-tag type="danger">冻结金额</el-tag>
            <p>因风控或投诉冻结的资金，需要处理后解冻</p>
          </div>
          <div class="finance-item">
            <el-tag type="warning">在途金额</el-tag>
            <p>14天结算期内的资金，到期后转为可提现</p>
          </div>
        </div>

        <h3>提现规则</h3>
        <ul>
          <li>最低提现金额：100元</li>
          <li>提现手续费：免费</li>
          <li>到账时间：1-3个工作日</li>
          <li>支持提现方式：银行卡、支付宝、微信</li>
        </ul>

        <h3>风控机制</h3>
        <ul>
          <li>退款率 > 15%：需要人工审核提现</li>
          <li>好评率 < 80%：影响搜索排名</li>
          <li>好评率 < 70%：限制自动提现</li>
          <li>信用分数影响平台推荐权重</li>
        </ul>

        <h3>结算周期</h3>
        <p>为保障服务质量，平台采用14天结算周期。订单完成后，资金将在14天后自动转入可提现余额。</p>
      </div>
    </el-card>

    <!-- 常见问题 -->
    <el-card shadow="hover" class="help-section" id="faq">
      <template #header>
        <h2><el-icon><QuestionFilled /></el-icon> 常见问题</h2>
      </template>
      
      <div class="faq-content">
        <el-collapse>
          <el-collapse-item title="如何提高接单量？" name="1">
            <p>1. 完善商家信息，上传真实照片</p>
            <p>2. 提高服务质量，获得更多好评</p>
            <p>3. 合理设置接单距离和价格</p>
            <p>4. 开启自动接单功能</p>
            <p>5. 及时响应客户需求</p>
          </el-collapse-item>
          
          <el-collapse-item title="如何处理客户投诉？" name="2">
            <p>1. 及时回应客户关切</p>
            <p>2. 诚恳道歉并提出解决方案</p>
            <p>3. 必要时提供重新清洗服务</p>
            <p>4. 通过平台客服协调处理</p>
            <p>5. 总结经验，避免类似问题</p>
          </el-collapse-item>
          
          <el-collapse-item title="为什么提现需要审核？" name="3">
            <p>为保障平台和用户资金安全，以下情况需要人工审核：</p>
            <p>1. 退款率超过15%</p>
            <p>2. 好评率低于70%</p>
            <p>3. 近期有客户投诉</p>
            <p>4. 首次提现</p>
            <p>5. 大额提现（超过5000元）</p>
          </el-collapse-item>
          
          <el-collapse-item title="如何提高信用分数？" name="4">
            <p>1. 保持高完成率（>95%）</p>
            <p>2. 获得更多好评（>90%）</p>
            <p>3. 降低退款率（<5%）</p>
            <p>4. 及时处理订单，缩短处理时间</p>
            <p>5. 积极回复客户评价</p>
          </el-collapse-item>
          
          <el-collapse-item title="衣物损坏如何处理？" name="5">
            <p>1. 立即停止处理，拍照记录</p>
            <p>2. 及时联系客户说明情况</p>
            <p>3. 根据损坏程度协商赔偿</p>
            <p>4. 通过平台客服介入处理</p>
            <p>5. 完善操作流程，避免再次发生</p>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>

    <!-- 联系客服 -->
    <el-card shadow="hover" class="contact-card">
      <template #header>
        <h2><el-icon><Service /></el-icon> 联系客服</h2>
      </template>
      
      <div class="contact-content">
        <p>如果您还有其他问题，可以通过以下方式联系我们：</p>
        <div class="contact-methods">
          <div class="contact-item">
            <el-icon><Phone /></el-icon>
            <span>客服热线：400-888-8888</span>
          </div>
          <div class="contact-item">
            <el-icon><Message /></el-icon>
            <span>在线客服：工作日 9:00-18:00</span>
          </div>
          <div class="contact-item">
            <el-icon><ChatDotRound /></el-icon>
            <span>微信客服：laundry_service</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

// 滚动到指定区域
const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

// 页面初始化
onMounted(() => {
  console.log('帮助中心页面已加载')
})
</script>

<style scoped>
.help-center {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.help-header {
  text-align: center;
  margin-bottom: 40px;
  
  h1 {
    color: #1f2937;
    margin-bottom: 10px;
  }
  
  p {
    color: #6b7280;
    font-size: 16px;
  }
}

.quick-nav {
  margin-bottom: 30px;
}

.nav-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
}

.nav-content {
  text-align: center;
  padding: 20px;
  
  .nav-icon {
    font-size: 32px;
    color: #667eea;
    margin-bottom: 15px;
  }
  
  h3 {
    margin: 0 0 8px 0;
    color: #1f2937;
    font-size: 16px;
  }
  
  p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
  }
}

.help-section {
  margin-bottom: 30px;
  border-radius: 12px;
  
  h2 {
    margin: 0;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  h3 {
    color: #374151;
    margin: 20px 0 10px 0;
    font-size: 16px;
  }
  
  ul {
    margin: 10px 0;
    padding-left: 20px;
    
    li {
      margin-bottom: 8px;
      color: #6b7280;
      line-height: 1.5;
    }
  }
  
  p {
    color: #6b7280;
    line-height: 1.6;
    margin: 8px 0;
  }
}

.service-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  margin: 15px 0;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 6px;
  
  span {
    color: #6b7280;
    font-size: 14px;
  }
}

.process-tips {
  margin-top: 30px;
  padding: 20px;
  background: #fef7f0;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
}

.finance-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.finance-item {
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
  
  p {
    margin: 8px 0 0 0;
    font-size: 14px;
  }
}

.contact-card {
  border-radius: 12px;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
  
  .el-icon {
    color: #667eea;
    font-size: 18px;
  }
  
  span {
    color: #374151;
    font-size: 14px;
  }
}

:deep(.el-card__header) {
  background: #fafbfc;
  border-bottom: 1px solid #e5e7eb;
}

:deep(.el-steps) {
  margin: 20px 0;
}

:deep(.el-collapse) {
  border: none;
}

:deep(.el-collapse-item__header) {
  background: #f8fafc;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 10px;
  font-weight: 500;
}

:deep(.el-collapse-item__content) {
  padding: 15px 20px;
  background: #ffffff;
  border-radius: 6px;
  margin-bottom: 10px;
}
</style>
